<template>
  <div class="folder-input">
    <input
      class="upload-inp"
      type="file"
      :multiple="multiple"
      :accept="accept"
      :webkitdirectory="uploadFolder"
      :mozdirectory="uploadFolder"
      :odirectory="uploadFolder"
      @change="handleChange"
    />

    <el-button class="btn">选择文件夹</el-button>
  </div>
</template>

<script>
export default {
  name: 'Upload',
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    accept: {
      type: String,
      default: ''
    },
    uploadFolder: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    handleChange(e) {
      this.$emit('change', {
        files: e.target.files
      })
    }
  }
}
</script>
<style scoped lang="scss">
.folder-input {
  color: #606266;
  position: relative;
  width: 120px;
  height: 36px;
  cursor: pointer;

  .upload-inp {
    border: 1px solid black;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
  }

  .btn {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
